<script setup>
import { useRouter, useRoute } from 'vue-router'
import useDataStore from '@/store/index'
import { nextTick, onUnmounted, ref, toRef, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { searchAPI } from '@/apis/home'

defineOptions({
    name: 'footers'
})

const route = useRoute()
const router = useRouter()
const dataStore = useDataStore()

const { userInfo } = storeToRefs(dataStore)

let footerNavList = ref([
    {
        title: '首页',
        name: 'home',
        icon: 'shouye'
    },
    {
        title: '搜索',
        name: 'mobileSearch',
        icon: 'chazhao'
    },
    {
        title: '发布',
        name: 'publish',
        icon: 'fabu'
    },
    {
        title: '聊天',
        name: 'rate',
        icon: 'liaotian'
    },
    {
        title: '我的',
        name: 'me',
        icon: 'wode'
    },
])
let active = ref('home')

const changeNav = (name, index) => {
    if (name === 'me') {
        router.push({ name: 'me', query: { user_id: userInfo.value.user_id } })
    } else {
        router.push(name)
    }

    active.value = name


}

// 让导航的高亮以当前路由为依据，而不是点击
const stopWatcher = watch(
    () => route.name,
    (newValue, oldValue) => {
        active.value = newValue
    }, {
    immediate: true
}
)

onUnmounted(() => {
    stopWatcher()
})

</script>

<template>
    <div class="footer-box">
        <div class="footers">
            <div :class="{ footersItem: true, active: active === item.name }" v-for="(item, index) in footerNavList"
                :key="item.name" @click="changeNav(item.name, index)">
                <div class="item-icon" v-show="active !== item.name"><i :class="`iconfont icon-${item.icon}`"></i></div>
                <div class="item-name" v-show="active === item.name">{{ item.title }}</div>

            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.footer-box {
    width: 100%;
    height: 48px;
    box-shadow: #eee 0 3px 5px 0;
    display: flex;
    justify-content: center;
    z-index: 1000;

    .footers {
        width: 95%;
        background: rgb(255, 255, 255);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        box-shadow: #eee 0 -3px 10px 3px;

        .footersItem {
            display: flex;
            flex-direction: column;
            align-items: center;

            .item-icon {
                font-size: 18px;
                font-weight: 600;
                margin-bottom: 2px;
            }
        }

        .active {
            color: #8e8cd8;
        }
    }
}
</style>